<template>
    <Modal
        :value="visible"
        :title="title"
        width="600"
        @on-cancel="handleCancel"
        @on-ok="submit" >  
          <Form :label-width="80" class="editDomain" ref="form"  :model="temp" :rules="ruleValidate">
              <Row>
                <Col span="22">
                  <FormItem label="客户：" prop="customer_id"> 
                      <Select filterable :disabled="!isCreate" v-model="temp.customer_id" placeholder="请选择客户"  style="width: 400px; ">
                          <Option v-for="(item,index) in allCustomers" :value="`${item.customer_id}`" :key="index">{{item.customer_mark}}</Option>
                      </Select>
                  </FormItem>
                </Col>
                <Col span="4"></Col>
              </Row>  
              <Row>
                <Col span="22">
                  <FormItem label="域名：" prop="domain"> 
                      <Input type="text" v-model="temp.domain"  placeholder="请填写域名"  style="width: 400px; " />
                  </FormItem>
                </Col>
                <Col span="4"></Col>
              </Row> 
              <Row>
                <Col span="22">
                  <FormItem label="服务类型：">   
                      <select class="ui-select" @change="handleChangeType" :value="temp.type"  placeholder="请选择服务类型"  style="width: 400px; ">
                          <option v-for="item in serviceOptions" :value="item.value" :key="item.value">{{item.label}}</option>
                      </select> 
                  </FormItem>
                </Col>
                <Col span="4"></Col>
              </Row>  
              <Row>
                <Col span="22">
                  <FormItem label="域名状态："> 
                      <select class="ui-select" @change="handleChangeStatus" :value="temp.status"  placeholder="请选择域名状态"  style="width: 400px; ">
                          <option v-for="item in statusOptions" :value="item.value" :key="item.value">{{item.label}}</option>
                      </select> 
                  </FormItem>
                </Col>
                <Col span="4"></Col>
              </Row>  
          </Form> 
        <Button slot="footer" type="text" size="large" @click="handleCancel">取消</Button>
        <Button slot="footer" type="primary" size="large" @click="submit">确定</Button>
    </Modal>  
</template>

<script> 
import { mapGetters } from 'vuex'
import { SERVICE_OPTIONS, STATUS_OPTIONS } from '@/utils/opts'
import { cloneDeep } from '@/utils'
import { DOMAIN_RULE } from '@/utils/regExpRule'
export default {
    name: "CreateDomainModal",
    props: {
        title: String,
        visible: Boolean,
        isCreate: Boolean,
        data: {
            type: Object,
            default(){
                return {
                    customer_id: '',
                    domain: "",  
                    status: 1, // 1.测试 2.商务 3.停用
                    type: 1, //服务类型 1.点播加速 2.下载加速 3.页面加速 
                }
            }
        }
    },
    computed: {
        ...mapGetters(['allCustomers'])
    },
    data(){
        return {
            serviceOptions: cloneDeep(SERVICE_OPTIONS),
            statusOptions: cloneDeep(STATUS_OPTIONS),
            ruleValidate: { 
                customer_id: [
                    { required: true, message: '请选择客户', trigger: 'blur' },
                ],
                domain: [
                    { required: true, message: '请填写域名', trigger: 'blur' },
                    { type: "string", message: '请填写正确格式的域名', pattern: DOMAIN_RULE, trigger:'blur'},
                ],
            }, 
            temp: { 
                customer_id: '',
                domain: '',
                status: '1',
                type: '1',
            }, 
            rules: {  
                domain: [{ required: true, message: '请填写域名', trigger: 'blur' }],
                company: [{ required: true, message: '请填写公司名', trigger: 'blur' }],
            },
        }
    },
    watch:{
        data(d){
            this.temp.customer_id = `${d.customer_id}`  
            this.temp.domain = d.domain  
            this.temp.type = `${d.type}`  
            this.temp.status = `${d.status}`  
        }
    },
    methods: {
        submit(){ 
            this.$refs.form.validate((valid) => { 
                if (valid) { 
                    let temp = cloneDeep(this.temp)
                    temp.customer_id = parseInt(temp.customer_id)
                    temp.status = parseInt(temp.status)
                    temp.type = parseInt(temp.type)
                    this.$emit('save', Object.assign({}, temp)) 
                }
            })
        }, 
        handleCancel(){
            this.$emit('closeModal')
        }, 
        handleChangeStatus(e){
            this.temp.status = e.target.value
        }, 
        handleChangeType(e){
            this.temp.type = e.target.value
        }
    }
}
</script>

<style lang="scss" scoped>
    .title{
        border-left:  3px solid #409EFF;
        font-size: 16px;
        color: #333;
        padding-left: 10px;
        margin-bottom: 15px;
    }
</style>


